<docs>
  ## 语言能力
</docs>
<template>
  <div>
    <div class="beijingtu"></div>
    <div class="bg_g">
      <!-- 背景图 -->

      <!-- 基本个人信息 -->

      <div class="box1">
        <co-form :model="data" :rules="rules" ref="form">
          <div class="box3 boild">
            <div class="describe">外语能力</div>
            <co-select class="pad_left" prop="yz" :list="yzList" v-model="data.yz"></co-select>
          </div>
          <div class="box3">
            <div class="describe">等级</div>
            <co-select class="pad_left" prop="dj" :list="djList" v-model="data.dj"></co-select>
          </div>
          <!--其他外语能力 -->
          <!-- 职务 -->
        </co-form>
      </div>
    </div>
    <div class="bottom"></div>
    <!-- <div class="h100" style="height:.8rem;"></div> -->
    <!-- 底部保存 -->
    <div class="info-bottom" v-if="this.yynlid==null">
      <button type="button" class="bc" @click="qzyxbc">保&nbsp;&nbsp;存</button>
    </div>
    <div class="info-bottom" v-else>
      <button type="button" class="del" style="margin-left:3%" @click="yydel">删&nbsp;&nbsp;除</button>
      <button type="button" class="bcc" style="margin-left:5%" @click="qzyxbc">修&nbsp;&nbsp;改</button>
    </div>
  </div>
</template>
<script>
import $ from "@/common/js/axios";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import PickerExtend from "picker-extend"; //行政区划插件
import { validator } from "@/common/js/valid";
import { mixinValid } from "@/common/mixins/mixins";

export default {
  components: { coInput, coForm, coSelect },
  mixins: [mixinValid],
  data() {
    return {
      jlxx: "", // 查询简历信息 判断后端返回的数组里是否有同样的语种和等级 如果有则不能添加相同的语种和等级
      yynl: [], // 查询简历信息 判断后端返回的数组里是否有同样的语种和等级 如果有则不能添加相同的语种和等级
      yynlid: "",
      djList: [], // 等级数组
      yzList: [], // 语种
      data: {
        yynlid: "", //类型：String  可有字段  备注：14,full,语言能力ID,true
        yz: "", //类型：String  必有字段  备注：4,number,语种,false
        dj: "" //类型：String  必有字段  备注：4,number,等级,false
      },
      rules: {
        yynlid: validator('24,"full","语言能力ID",false'),
        yz: validator('24,"full","语种",false'),
        dj: validator('24,"full","等级",false')
      }
    };
  },
  computed: {},
  methods: {
    //获取等级
    getdj() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "byskzzp_d_yzdj" } }).then(
        res => {
          this.djList = res.returnData.dmblb;
        }
      );
    },
    // 获取语种
    getyz() {
      $.get("/dmb/dmblbCx", { params: { dmbmc: "cdg_language" } }).then(res => {
        this.yzList = res.returnData.dmblb;
      });
    },
    // 个人简历信息查询
    getjlxxcx() {
      this.$loading = true;
      $.get("/wdjl/jlxxCx").then(res => {
        this.$loading = false;
        this.jlxx = res.returnData.jlxx;
        this.yynl = res.returnData.jlxx.yynl;
        // console.log(this.yynl)
      });
    },
    asd() {},
    // 保存求外语等级向接口
    qzyxbc() {
      var yz = this.data.yz; // 拿到v-model 等语种和等级
      var dj = this.data.dj;
      var that = this; // 重新指向this
        this.yynl.forEach(function(item, index) {
          //循环数据库 里面的 yz和等级
          if (dj == item.dj && yz == item.yz) {
            // 如果传入的等级 和语种 与数据库里的一样  给用户提示
            that.$alert({
              type: "warning",
              message: "请勿重复录入相同的语言能力和等级！"
            });
          }
          return false;
        });
        this.$refs.form.validate(() => {
          $.post("/wdjl/yynlBc", this.data).then(res => {
            if (res.returnData.executeResult == "1") {
              this.$alert(
                {
                  type: "success",
                  message: res.returnData.message
                },
                () => {
                  this.$router.push({ path: "/cvitae" });
                }
              );
            } else {
              this.$alert({
                type: "warning",
                message: res.returnData.message
              });
            }
          });
        });
      
    },
    // 语言能力查询  需要判断添加过的语言和等级不能重复添加
    getjyjl() {
      this.$loading = true;
      $.get("/wdjl/yynlCx?yynlid=" + this.yynlid + "").then(res => {
        this.data = res.returnData.yynl;
        this.$loading = false;
        // this.jyjlid = data.jyjlid
      });
    },
    //删除语言
    yydel() {
      //工作经历删除JSON.stringify(this.id)
      this.$confirm("确认删除本语言吗？", "提示", {
        cancleBtnText: "取消",
        confirmBtnText: "确认"
      })
        .then(() => {
          $.post("/wdjl/yynlSc", { yynlid: this.yynlid }).then(res => {
            if (res.returnData.executeResult == "1") {
              this.$alert(
                {
                  type: "success",
                  message: res.returnData.message
                },
                () => {
                  this.$router.push({ path: "/cvitae" });
                }
              );
            } else {
              this.$alert({
                type: "warning",
                message: res.returnData.message
              });
            }
          });
        })
        .catch(() => {});
    }
  },
  created() {
    this.getjlxxcx(); // 简历信息查询
    this.getdj(); // 查询等级
    this.getyz(); //查询语种
    let id = this.$route.query.yynlid;
    this.yynlid = id;
    if (id) {
      this.getjyjl();
    }
  },
  mounted() {
    // this.getjyjl()
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/var.scss";
.boild {
  margin-bottom: 60px;
}
.boild::after {
  content: " ";
  display: inline-block;
  width: 85%;
  border-bottom: 1px solid rgba(229, 229, 229, 1);
  position: absolute;
  top: 120%;
  // right: 0.64rem;
}
img {
  width: 32px;
  height: 32px;
}
.bg_g {
  padding: 0 34px;
  overflow: hidden;
  position: relative;
}
.describe {
  font-size: $font-size-base;
  margin: 30px 0 15px 0;
  color: #666666;
}
.padd {
  font-weight: bold;
  font-size: 32px;
  margin: 20px 0 66px 32px;
  display: block;
  color: #333333;
}
.info_bottom {
  background: white;
}
.beijingtu {
  width: 100%;
  height: 880px;
  background: url("../../common/images/beijing.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: -9000;
  margin-top: -210px;
}
.bottom {
  width: 100%;
  height: 190px;
  background: url("../../common/images/dbg.png") no-repeat;
  background-size: 100%;
  position: fixed;
  bottom: 0;
  // margin-top: 4rem;
}
.h50 {
  height: 0.3rem;
}
.box3 {
  // margin-left: 0.7rem;
  position: relative;
  padding-left: 35px;
}

.box1 {
  // width: 90%;
  margin: 40px auto;
  padding: 5px 0 30px 0;
  background: white;
  overflow: hidden;
  border-radius: 4px;
}
</style>
